<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伸缩容器</title>
</head>
<style>
  
    .outer {
        width: 1000px;
        height: 600px;
        background-color: rgb(255, 183, 183);
        /* 父容器变成伸缩容器 */
        display: flex;
        /* 伸缩容器的子元素的排列方向 */
        /* flex-direction: row-reverse; */
        /* flex-direction: column; */
        /* 主轴换行方式 */
        flex-wrap: wrap;
        /* 从左向右 */
        justify-content:  flex-start;
        /* 从右向左 */
        /* justify-content:  flex-end; */
        /* 从中间开始 */
        /* justify-content:  center; */
        /* 两端对齐 */
        /* justify-content:  space-between; */
        /* 平均分布 */
        justify-content:  space-around;


        
        /* 平均分布，两边不留空 */
        /* justify-content:  space-evenly; */


    }
    .inner {
        width: 200px;
        height: 200px;
        background-color: rgb(114, 153, 59);
        border: red 1px solid;
        box-sizing: border-box;
    }
</style>

<body>

 <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>

 </div>
<!-- <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
</div> -->
    
</body>
</html>